* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(100deg, red, blue);
  padding: 0.833rem 1.667rem;
  height: 30rem;
}
ul li {
  list-style: none;
}
.box {
  display: flex;
  height: 100%;
}
.box .left {
  flex: 3;
}
.box .left .top {
  display: flex;
  margin-top: 2rem;
}
.box .left .top span {
  font-size: 1rem;
  padding: 0.208rem 0.208rem;
}
.box .left .top input {
  width: 8.333rem;
  height: 1.667rem;
  border-radius: 0.208rem;
  border: none;
  outline: none;
  padding-left: 0.208rem;
  font-size: 0.833rem;
}
.box .left .top button {
  height: 1.667rem;
  width: 3.33rem;
  font-size: 0.833rem;
  border-radius: 0.208rem;
  border: none;
  outline: none;
  background-color: #0e7cb3;
}
.box .left table {
  margin-top: 0.833rem;
  width: 35.417rem;
  border: 1px solid #fff;
  border-spacing: 0;
  border-radius: 0.208rem;
}
.box .left table tr {
  height: 1.667rem;
  text-align: center;
}
.box .left table tr th {
  background: linear-gradient(100deg, #5da3a9, #5da3a9);
  text-align: center;
}
.box .left table tr th,
.box .left table tr td {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
.box .right {
  flex: 2;
}
.box .right .top {
  height: 50%;
}
.box .right .bottom {
  height: 50%;
}
